<template>
  <view class="goods-detail" v-if="goodsList.goods_name">
    <view class="detail-swiper">
      <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-active-color="#44cd8c" circular="true">
        <swiper-item v-for="(goodsImg,index) in goodsList.pics" :key="goodsImg.pics_id">
          <image :src="goodsImg.pics_big" mode="widthFix" @click="perview(index)"></image>
        </swiper-item>
      </swiper>
    </view>
    <view class="goods-detail-info">
      <view class="info-price">
        <text class="present-price" :style="['font-size: 40rpx;','color: red;']">￥{{135}}</text>
        <view class="primary-price" :style="['color: #999']">
          <text>原价</text>
          <text :style="['text-decoration: line-through']"> ￥{{135}}</text>
        </view>
      </view>
      <view class="info-title">
       <view class="info-title-text">
         {{textShow? text : text.substr(0,42) + ' ...'}}
       </view>
       <view class="text-btn" @click="textShow = !textShow">{{ textShow? '收起' : '展开' }}</view>
      </view>
      <view class="goods-freight">
        <text>快递：免运费</text>
      </view>
      <!-- 渲染商品信息图 -->
      <rich-text :nodes="goodsList.goods_introduce"></rich-text>
    </view>
    <view class="goods-nav">
      <uni-goods-nav :iconInfo="iconTextList" :goodsBtnList="goodsBtnList" @click="onClickIcon"></uni-goods-nav>
    </view>
  </view>
</template>

<script setup>
  import {reactive, ref,watch} from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import {useStore} from 'vuex'
  const textShow = ref(false)
  const store = useStore()
  const text = ref('项目编译成功。前端运行日志，请另行在小程序开发工具的控制台查看。另行在小程序开发工具的控制台查看。另行在小程序开发工具的控制台查。')
  onLoad((options) => {
    getGoodsList(parseInt(options.cid))
  })
  
  const goodsList = ref([])
  const getGoodsList = async (goods_id) => {
    const {data} = await uni.$http.get('/api/public/v1/goods/detail', {goods_id})
    if(data.meta.status !== 200) return uni.$showMsg()
    goodsList.value = data.message
  }
  
  // 轮播图图片预览效果
  const perview = (index) => {
    uni.previewImage({
      current : index,
      urls: goodsList.value.pics.map(item => item.pics_big)
    })
  }
  
  const iconTextList = reactive([
    {notIcon:'icon-home',seleteIcon:'',text: '店铺'},
    {notIcon:'icon-heart', seleteIcon:'icon-heart-filled', text: '收藏'},
    {notIcon:'icon-chevron-down-circle', seleteIcon:'', text: '购物车', promptNum: '0'},
  ])
  const goodsBtnList = reactive([
    {text: '加入购物车', color: '#ff0000'},
    {text: '立即购买',  color: '#ffa200'}
  ])
  const onClickIcon = (event) => {
    if(event.seleteIcon !== '' && store.state.user.isCollect.type === event.notIcon) {
      store.commit('user/setCollect')
    }
    // 点击购物车图标
    if (event.text === '购物车') {
      uni.switchTab({
        url: '/pages/cart/cart'
      })
    }
    // 点击加入购物车
    if(event === '加入购物车') {
      const goods = {
        goods_id: goodsList.value.goods_id,
        goods_name: goodsList.value.goods_name,
        goods_price: goodsList.value.goods_price,
        goods_count: 1,
        pics_sma_url: goodsList.value.goods_small_logo,
        goods_state: true // 是否勾选
      }
      store.commit('cart/setCartList', goods)
      store.dispatch('cart/savetoStoreage')
    }
  }
  // 侦听购物车数量的变化
  watch(() => store.getters['cart/total'], (newVal) => {
   const resultBtn = iconTextList.find(item => item.text === '购物车')
   if(resultBtn) {
      resultBtn.promptNum = newVal
   }
  }, {immediate: true})
</script>

<style lang="scss">
.goods-detail {
  box-sizing: border-box;
  .detail-swiper {
    height: 500rpx;;
    swiper, image {
      width: 100%;
      height: 100%;
    }
  }
  .goods-detail-info {
    padding: 0 20rpx;
    .info-price {
      display: flex;
      align-items: center;
      margin: 20rpx 0;
      .present-price,.primary-price {
        margin-right:10rpx;
      }
    }
    .info-title {
      position: relative;
      font-size: 30rpx;
      font-weight: 700;
      &:before {
        width: 100rpx;
      }
      .info-title-text {
        line-height: 40rpx;
        // overflow: hidden;
        // word-break: break-all;
        // text-overflow:ellipsis;
        // display:-webkit-box; 
        // -webkit-box-orient:vertical;
        // -webkit-line-clamp:2; 
      }
        .text-btn {
          position: absolute;
          bottom: 0;
          right: 28rpx;
          color: #999;
          font-size: 26rpx;
        }
    }
  }
  .goods-freight {
    font-size: 25rpx;
    color: #999;
    margin-top: 20rpx;
    margin-bottom: 70rpx;
  }
}
</style>
